<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <el-row>
              <el-row style="margin-bottom:20px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }">
                    <font color="#A1FEDB" size="4">系统总览</font>
                  </el-breadcrumb-item>
                  <el-breadcrumb-item>
                    <font color="#A1FEDB" size="4">告警管理</font>
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </el-row>
            </el-row>
            <el-row>
              <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label name="first">
                  <el-tabs tab-position="left" v-model="activeName2" @tab-click="handleClick">
                    <el-row style="margin-bottom:2rem">
                      <el-col :span="8">
                        <el-row style="margin-left:8rem">
                          <el-col style="padding-right:4rem" :span="12">
                            <el-date-picker
                              v-model="value1"
                              type="date"
                              placeholder="选择日期"
                              format="yyyy-MM-dd"
                              @change="selectbytime()"
                            ></el-date-picker>
                          </el-col>
                          <el-col :span="12">
                            <el-button type="primary" round>根据日期查询</el-button>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8"></el-col>
                      <el-col :span="8">
                        <!-- <el-row>
                          <el-col style="padding-right:4rem;padding-left:4rem;" :span="12">
                            <el-input v-model="input" placeholder="所属变电站"></el-input>
                          </el-col>
                          <el-col :span="12">
                            <el-button type="primary" round>所属变电站查询</el-button>
                          </el-col>
                        </el-row>-->
                      </el-col>
                    </el-row>
                    <el-table
                      :data="tableData1"
                      style="width: 100%"
                      height="700"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                    >
                      <el-table-column label="故障信息" align="center">
                        <el-table-column align="center" prop="发生时间" label="发生时间"></el-table-column>
                        <el-table-column align="center" prop="设备类型" label="设备类型"></el-table-column>
                        <el-table-column align="center" prop="故障信息" label="故障信息"></el-table-column>
                        <el-table-column align="center" prop="备注信息" label="备注信息"></el-table-column>
                      </el-table-column>
                    </el-table>
                  </el-tabs>
                </el-tab-pane>
              </el-tabs>
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      showinfo1: false,
      showinfo2: false,
      showinfo3: false,
      showinfo4: false,
      showinfo5: false,
      input: '',
      netinput: '',
      binput: '',
      bname: '',
      healthlevel: '',
      labelPosition: 'right',
      healthindex: 3.64,
      hishealthindex: [2.3, 3.4, 4.5, 2.5, 1.4, 0.5, 3.6],

      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      tableData9: [],
      tableData10: [],
      tableData11: [],
      labelPosition: 'left',
      activeIndex: '3',
      activeName: 'first',
      activeName2: '1',
      value1: '',
      value2: '',

      scroll: true,
      onlinelist: [],
      list1: [],
      list: []
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {},

  mounted() {
    this.value1 = this.getNowFormatDate()

    this.value2 = this.value1
    this.fxshowinfo()
    this.showhitype()
    this.readdata()

    // setInterval(function() {
    //   option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
    //   myChart.setOption(option, true)
    // }, 20000)
  },

  methods: {
    selectbytime() {
      this.value2 = this.getFormatDate(this.value1)
      this.readdata()
    },
    readdata() {
      this.$axios({
        method: 'get',
        params: {
          // name: name,
          date: this.value2
        },
        url: 'http://127.0.0.1:8082/alarm/searchall'
      }).then(res => {
        console.log(res.data)
        this.tableData1 = res.data
        // this.tableData2 = res.data[1]
        // this.tableData3 = res.data[2]
        // this.tableData4 = res.data[3]
        // this.tableData5 = res.data[4]
        // this.tableData6 = res.data[5]
        // this.tableData7 = res.data[6]
        // this.tableData8 = res.data[7]
        // this.tableData9 = res.data[8]
        // this.tableData10 = res.data[9]
      })
    },
    //时间格式转换器
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //通用时间格式转换器
    getFormatDate(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    showhitype() {
      for (let i = 0; i < this.tableData1.length; i++) {
        if (this.tableData1[i].data1 == 1 || 2 || 3) {
          this.healthlevel = 'healthtype1'
        } else if (this.tableData1[i].data1 == 3 || 4 || 5) {
          this.healthlevel = 'healthtype2'
        } else if (this.tableData1[i].data1 == 6 || 7 || 8) {
          this.healthlevel = 'healthtype3'
        }
      }
    },
    hishowHi() {
      let myChart4 = this.$echarts.init(document.getElementById('table4'))
      let option4 = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['配电网']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: ['1.0', '2.0', '3.0', '4.0', '5.0', '6.0', '7.0']
          }
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '支路健康指数',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: this.hishealthindex
          }
        ]
      }
      myChart4.setOption(option4)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart4.resize()
      })
    },
    showHi() {
      let myChart3 = this.$echarts.init(document.getElementById('table3'))
      let option3 = {
        legend: {
          orient: 'vertical',
          left: 'left',
          //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
          data: ['危急缺陷', '严重缺陷', '一般缺陷', '亚健康', '健康'],
          selectedMode: false, //图例禁止点击
          top: 20,
          left: 20,
          itemWidth: 23,
          itemHeight: 6,
          textStyle: {
            color: '#86E2C5',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 11
          }
        },
        grid: {
          z: 1, //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏
          show: false,
          left: '-30%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          splitLine: {
            show: false //隐藏分割线
          }
        },
        xAxis: [
          //这里有很多的show，必须都设置成不显示
          {
            type: 'category',
            data: [],
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitArea: {
              interval: 'auto',
              show: false
            }
          }
        ],
        yAxis: [
          //这里有很多的show，必须都设置成不显示
          {
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        toolbox: {
          show: false
        },
        series: [
          {
            name: '刻度盘',
            type: 'gauge',
            min: 0,
            max: 5,
            title: {
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 15,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              formatter: '健康指数:{value}'
            },

            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.2, '#ff0000'],
                  [0.4, '#ffc000'],
                  [0.6, '#ffff00'],
                  [0.8, '#0070c0'],
                  [1, 'rgba(6, 114, 2, 0.973)']
                ]
              }
            },
            data: [
              {
                value: this.healthindex,
                name: '网络健康指数',
                label: { textStyle: { color: '#ff0000', fontSize: 5 } }
              }
            ]
          },

          {
            name: '危急缺陷',
            type: 'bar',
            barWidth: '60%', //不显示，可以随便设置
            data: [0],
            itemStyle: {
              normal: {
                color: '#FE0C03' //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
              }
            }
          },
          {
            name: '严重缺陷',
            type: 'bar',
            barWidth: '60%',
            data: [0],
            itemStyle: {
              normal: {
                color: '#F78A21'
              }
            }
          },
          {
            name: '一般缺陷',
            type: 'bar',
            barWidth: '60%',
            data: [0],
            itemStyle: {
              normal: {
                color: '#F6E41A'
              }
            }
          },
          {
            name: '亚健康',
            type: 'bar',
            barWidth: '60%',
            data: [0],
            itemStyle: {
              normal: {
                color: '#187EEB'
              }
            }
          },
          {
            name: '健康',
            type: 'bar',
            barWidth: '60%',
            data: [0],
            itemStyle: {
              normal: {
                color: '#00BE13'
              }
            }
          }
        ]
      }
      myChart3.setOption(option3)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart3.resize()
      })
    },
    searchbid() {
      if (this.binput == 9) {
        let tableData1 = [
          {
            date1: '9',
            date2: '齐鲁师范学院变电站',
            date3: '变压器',
            date4: '10KV',
            date5: '2018/10/1',
            date6: '无锡变压器厂',
            date7: '2018/2/1',
            date8: '0.3'
          }
        ]
        this.tableData1 = tableData1
      } else if (this.bname == 'AB123456') {
        let tableData1 = [
          {
            date1: '9',
            date2: '古平岗位',
            date3: '变压器',
            date4: '10KV',
            date5: '2018/10/1',
            date6: '无锡变压器厂',
            date7: '2018/2/1',
            date8: '0.3'
          }
        ]
        this.tableData1 = tableData1
      }
    },
    searchid() {
      if (this.input == 1) {
        let formLabelAlign = {
          data1: '1',
          data2: '齐鲁师范学院变电站',
          data3: '8',
          data4: '50m',
          data5: '60m',
          data6: '11',
          data7: '15',
          data8: '23',
          data9: '24'
        }
        let hishealthindex = [3.3, 1.4, 2.5, 3.5, 4.4, 3.5, 2.3]
        this.hishealthindex = hishealthindex
        this.formLabelAlign = formLabelAlign
        this.healthindex = 2.3
        this.hishowHi()
        this.fxshowinfo()
        this.showHi()
      } else if (this.input == 2) {
        let formLabelAlign = {
          data1: '2',
          data2: '大明湖变电站',
          data3: '16',
          data4: '80m',
          data5: '70m',
          data6: '15',
          data7: '35',
          data8: '23',
          data9: '24'
        }
        let hishealthindex = [1.3, 2.4, 3.5, 3.5, 3.4, 3.5, 4.3]
        this.hishealthindex = hishealthindex
        this.formLabelAlign = formLabelAlign
        this.healthindex = 4.3
        this.hishowHi()
        this.fxshowinfo()
        this.showHi()
      }
    },
    changelevel() {
      this.healthindex = this.healthindex + 1
      this.fxshowinfo()
    },
    fxshowinfo() {
      console.log(this.healthindex)
      if (0 < this.healthindex && this.healthindex <= 1) {
        this.showinfo1 = true
        this.showinfo2 = false
        this.showinfo3 = false
        this.showinfo4 = false
        this.showinfo5 = false
      } else if (1 < this.healthindex && this.healthindex <= 2) {
        this.showinfo1 = false
        this.showinfo2 = true
        this.showinfo3 = false
        this.showinfo4 = false
        this.showinfo5 = false
      } else if (2 < this.healthindex && this.healthindex <= 3) {
        this.showinfo1 = false
        this.showinfo2 = false
        this.showinfo3 = true
        this.showinfo4 = false
        this.showinfo5 = false
      } else if (3 < this.healthindex && this.healthindex <= 4) {
        this.showinfo1 = false
        this.showinfo2 = false
        this.showinfo3 = false
        this.showinfo4 = true
        this.showinfo5 = false
      } else if (4 < this.healthindex && this.healthindex <= 5) {
        this.showinfo1 = false
        this.showinfo2 = false
        this.showinfo3 = false
        this.showinfo4 = false
        this.showinfo5 = true
      } else {
        this.showinfo1 = false
        this.showinfo2 = false
        this.showinfo3 = false
        this.showinfo4 = false
        this.showinfo5 = false
      }
    },
    openDetails(a, b) {
      this.$router.push({ path: '/healthdiagnosis/diagnosisdetails' })
    },
    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    getRowClass3({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#F50C0C;'
      return 'background:#050E11;color:#18EFF2;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data &&
                Array.isArray(data.nodes) &&
                Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="scss">
.el-tabs {
  width: 100%;
  color: white;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
.el-table {
  background-color: #032121;
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
}
#topology-canvas {
  width: 99%;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
//控制画布的大小
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;
  // background-image: url("+require('../assets/images/timg.jpg')")
}

#table1 {
  width: 99%;
  height: 333px;
  //
  background-image: url(../../assets/images/新UI16.png);
}

#table2 {
  width: 95%;
  height: 389px;

  background-color: #005b5c;
  background-image: url(../../assets/images/新UI46.png);
}

#table3 {
  width: 95%;
  height: 333px;
  margin-left: 3rem;
  background-image: url(../../assets/images/新UI16.png);
}
#table4 {
  width: 100%;
  height: 333px;

  margin-left: 3rem;

  background-image: url(../../assets/images/新UI16.png);
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.showinfo {
  width: 20rem;
  height: 10rem;
  position: absolute;
  left: 85%;
  top: 7rem;
  z-index: 3;
  font-size: 1.7rem;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.healthtype1 {
  background-color: #fe0c03;
}
.healthtype2 {
  background-color: #f68a20;
}
.healthtype3 {
  background-color: #f7e51a;
}
.healthtype4 {
  background-color: #187eeb;
}
.healthtype5 {
  background-color: #00be13;
}
</style>
